// ----------------------- 图表概览 -----------------------
function studentData({ total, avgSalary, avgAge, proportion }) {
  qs(".total").innerHTML = total;
  qs(".avgSalary").innerHTML = avgSalary;
  qs(".avgAge").innerHTML = avgAge;
  qs(".proportion").innerHTML = proportion;
}

axios.get("/student/overview").then(({ data: res }) => {
  studentData(res.data);
});
// ----------------------- 饼图 -----------------------
function pieChart() {
  const myChart = echarts.init(document.querySelector(".pie"));
  const option = {
    tooltip: {},
    title: {
      text: "籍贯 Hometown",
      textStyle: {
        color: "#6d767e", // 标题演示
      },
    },
    series: [
      {
        name: "各地学员分布",
        type: "pie",
        radius: ["10%", "65%"],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 4,
        },
        data: [
          { value: 50, name: "河南省" },
          { value: 20, name: "西藏自治区" },
          { value: 40, name: "新疆维吾尔自治区" },
          { value: 60, name: "甘肃省" },
          { value: 40, name: "广西壮族自治区" },
          { value: 50, name: "黑龙江省" },
          { value: 60, name: "江苏省" },
          { value: 20, name: "河北省" },
          { value: 40, name: "广东省" },
          { value: 60, name: "云南省" },
          { value: 50, name: "湖南省" },
          { value: 30, name: "内蒙古自治区" },
          { value: 20, name: "山东省" },
          { value: 10, name: "江西省" },
        ],
      },
    ],
  };
  myChart.setOption(option);
}
pieChart();

// ----------------------- 地图 -----------------------
function chinaMap() {
  const myChart = echarts.init(document.querySelector(".map"));
  const chinaGeoCoordMap = {
    黑龙江: [127.9688, 45.368],
    内蒙古: [110.3467, 41.4899],
    吉林: [125.8154, 44.2584],
    北京市: [116.4551, 40.2539],
    辽宁: [123.1238, 42.1216],
    河北: [114.4995, 38.1006],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    陕西: [109.1162, 34.2004],
    甘肃: [103.5901, 36.3043],
    宁夏: [106.3586, 38.1775],
    青海: [101.4038, 36.8207],
    新疆: [87.9236, 43.5883],
    西藏: [91.11, 29.97],
    四川: [103.9526, 30.7617],
    重庆: [108.384366, 30.439702],
    山东: [117.1582, 36.8701],
    河南: [113.4668, 34.6234],
    江苏: [118.8062, 31.9208],
    安徽: [117.29, 32.0581],
    湖北: [114.3896, 30.6628],
    浙江: [119.5313, 29.8773],
    福建: [119.4543, 25.9222],
    江西: [116.0046, 28.6633],
    湖南: [113.0823, 28.2568],
    贵州: [106.6992, 26.7682],
    云南: [102.9199, 25.4663],
    广东: [113.12244, 23.009505],
    广西: [108.479, 23.1152],
    海南: [110.3893, 19.8516],
    上海: [121.4648, 31.2891],
    固始县: [115.659915, 32.175642],
  };
  const chinaDatas = [
    [
      {
        name: "黑龙江",
        value: 0,
      },
    ],
    [
      {
        name: "内蒙古",
        value: 0,
      },
    ],
    [
      {
        name: "吉林",
        value: 0,
      },
    ],
    [
      {
        name: "辽宁",
        value: 0,
      },
    ],
    [
      {
        name: "河北",
        value: 0,
      },
    ],
    [
      {
        name: "天津",
        value: 0,
      },
    ],
    [
      {
        name: "山西",
        value: 0,
      },
    ],
    [
      {
        name: "陕西",
        value: 0,
      },
    ],
    [
      {
        name: "甘肃",
        value: 0,
      },
    ],
    [
      {
        name: "宁夏",
        value: 0,
      },
    ],
    [
      {
        name: "青海",
        value: 0,
      },
    ],
    [
      {
        name: "新疆",
        value: 0,
      },
    ],
    [
      {
        name: "西藏",
        value: 0,
      },
    ],
    [
      {
        name: "四川",
        value: 0,
      },
    ],
    [
      {
        name: "重庆",
        value: 0,
      },
    ],
    [
      {
        name: "山东",
        value: 0,
      },
    ],
    [
      {
        name: "河南",
        value: 0,
      },
    ],
    [
      {
        name: "江苏",
        value: 0,
      },
    ],
    [
      {
        name: "安徽",
        value: 0,
      },
    ],
    [
      {
        name: "湖北",
        value: 0,
      },
    ],
    [
      {
        name: "浙江",
        value: 0,
      },
    ],
    [
      {
        name: "福建",
        value: 0,
      },
    ],
    [
      {
        name: "江西",
        value: 0,
      },
    ],
    [
      {
        name: "湖南",
        value: 0,
      },
    ],
    [
      {
        name: "贵州",
        value: 0,
      },
    ],
    [
      {
        name: "广西",
        value: 0,
      },
    ],
    [
      {
        name: "海南",
        value: 0,
      },
    ],
    [
      {
        name: "固始县",
        value: 0,
      },
    ],
    [
      {
        name: "上海",
        value: 1,
      },
    ],
  ];

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [121.4648, 31.2891];
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: fromCoord,
            value: dataItem[0].value,
          },
          {
            coord: toCoord,
          },
        ]);
      }
    }
    return res;
  };

  var series = [];
  [["上海", chinaDatas]].forEach(function (item) {
    series.push(
      {
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: "arrow", //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
          },
        },
        data: convertData(item[1]),
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name;
            },
            fontSize: 13,
          },
          emphasis: {
            show: true,
          },
        },
        symbol: "circle",
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: "#f00",
          },
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([
              dataItem[0].value,
            ]),
          };
        }),
      },
      //被攻击点
      {
        type: "scatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: "stroke",
          scale: 4,
        },
        label: {
          normal: {
            show: true,
            position: "right",
            //offset:[5, 0],
            color: "#0f0",
            formatter: "{b}",
            textStyle: {
              color: "#0f0",
            },
          },
          emphasis: {
            show: true,
            color: "#f60",
          },
        },
        symbol: "pin",
        symbolSize: 50,
        data: [
          {
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          },
        ],
      }
    );
  });

  option = {
    tooltip: {},
    title: {
      text: "来沪路线",
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(166, 200, 76, 0.82)",
      borderColor: "#FFFFCC",
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: "z-index:100",
      formatter: function (params) {
        //根据业务自己拓展要显示的内容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        res =
          "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        return res;
      },
    },
    visualMap: {
      //图例值控制
      min: 0,
      max: 1,
      calculable: true,
      show: false,
      color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
      textStyle: {
        color: "#fff",
      },
    },
    geo: {
      map: "china",
      zoom: 1.2,
      label: {
        emphasis: {
          show: false,
        },
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: "rgba(51, 69, 89, .5)", //地图背景色
          borderColor: "#516a89", //省市边界线00fcff 516a89
          borderWidth: 1,
        },
        emphasis: {
          color: "rgba(37, 43, 61, .5)", //悬浮背景
        },
      },
    },
    series: series,
  };
  myChart.setOption(option);
}
chinaMap();

//  ----------------------- 柱状图 -----------------------
function barChart({ avgScore, group, gt60, gt80, lt60 }) {
  const myChart = echarts.init(document.querySelector(".barChart"));
  option = {
    grid: {
      top: 30,
      bottom: 30,
      left: "7%",
      right: "7%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {},
    xAxis: [
      {
        type: "category",
        data: group,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: "{value} 分",
        },
      },
      {
        type: "value",
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: "{value} 人",
        },
      },
    ],
    series: [
      {
        name: "平均分",
        type: "bar",
        yAxisIndex: 0, // Y轴索引，1表示使用第2个Y轴
        barWidth: "15",
        data: avgScore,
      },
      {
        name: "低于60分人数",
        type: "bar",
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: "15",
        data: lt60,
      },
      {
        name: "60-80分之间",
        type: "bar",
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: "15",
        data: gt60,
      },
      {
        name: "高于80分人数",
        type: "bar",
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        barWidth: "15",
        data: gt80,
      },
    ],
  };
  myChart.setOption(option);
}

// ----------------------- 折线图 -----------------------
function lineChart(name, salary, truesalary) {
  const myChart = echarts.init(document.querySelector(".line"));
  const option = {
    tooltip: {
      trigger: "axis",
      position: function (pt) {
        return [pt[0], "10%"];
      },
    },
    title: {
      text: "薪资 Salary",
      textStyle: {
        color: "#6d767e",
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: name,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "50%"],
    },
    dataZoom: [
      {
        type: "slider",
        start: 0,
        end: 15,
      },
    ],
    series: [
      {
        name: "期望薪资",
        type: "line",
        symbol: "none",
        smooth: true,
        itemStyle: {
          color: "#ee6666",
        },
        data: truesalary,
      },
      {
        name: "实际薪资",
        type: "line",
        symbol: "none",
        smooth: true,
        itemStyle: {
          color: "#5470c6",
        },
        data: salary,
      },
    ],
  };
  myChart.setOption(option);
}

// ---------------------------获取学生信息---------------------
//  折线图  发送请求 拿到数据后进行整合
function getStudentList() {
  axios.get("/student/list").then(({ data: res }) => {
    if (res.code === 0) {
      let name = [];
      let salary = [];
      let truesalary = [];
      res.data.forEach((item) => {
        name.push(item.name);
        salary.push(item.salary);
        truesalary.push(item.truesalary);
        lineChart(name, salary, truesalary);
      });
    }
  });
}
getStudentList();

// 柱状图  获取学生成绩
function getScore(batch = 1) {
  axios
    .get("/score/batch", {
      params: {
        batch,
      },
    })
    .then(({ data: res }) => {
      // console.log(res);
      if (res.code == 0) {
        barChart(res.data);
      }
    });
}
getScore();
// 菜单功能
qs(".btn").addEventListener("click", function () {
  qs("#batch").classList.toggle("show");
});
qsAll("#batch li").forEach((item, index) => {
  item.addEventListener("click", function () {
    getScore(index + 1);
  });
});
